<template>
<view class="all">
    <view class="top">
        <!-- <view class="top"> -->
        <view style="display: flex; position: relative; align-items: center">
            <view class="search">
                <input type="text" value="" v-model="query.keywords" @confirm="searchFn" placeholder="搜索我的订单" placeholder-style="color:#999;font-size:13px;" />
                <icon class="searchIcon" @click="searchFn" type="search" size="26upx"></icon>
            </view>
            <view class="search-more-btn" @click="showFilter">
                <button type="default">筛选</button>
            </view>
        </view>
        <!-- 顶部选项卡 -->
        <scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
            <view v-for="(item, index) in status" :key="index" class="nav-item" :class="{ current: index === currentIndex }" :id="'tab' + index" @click="changeTab(item,index)">{{ item.title }}</view>
        </scroll-view>
    </view>
    <view class="order-all">
        <view class="order-list" v-for="(item, index) in list_data" :key="index">
            <order-list :row="item"></order-list>
        </view>
    </view>
    <view class="" v-if="list_data.length==0">
        <van-empty description="暂无记录" />
    </view>

    <!-- 筛选框 -->
    <uni-drawer ref="searchDrawer" :width="drawerWidth" mode="right" @close="screenClose">
        <view class="content">
            <view class="con_box">
                <text class="title">签约公司</text>
                <scroll-view scroll-y="true" style="height: 200upx">
                    <view class="list_box">
                        <view class="view_box" v-for="(item, index) in company_id.items" :key="index" :class="index == companyIndex ? 'actived' : ''" @click="selectCompany(item,index)">
                            <text>{{ item.title }}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="con_box" v-if="user_id.items.length >= 1">
                <text class="title">人员列表</text>
                <scroll-view scroll-y="true" style="height: 200upx">
                    <view class="list_box">
                        <view class="view_box" v-for="(item, index) in user_id.items" :key="index" :class="index == peopleIndex ? 'actived' : ''" @click="selectPeople(item,index)">
                            <text>{{ item.title }}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="con_box">
                <text class="title">筛选时间类型</text>
                <view class="list_box">
                    <view class="view_box" v-for="(item, index) in range_type.items" :key="index" :class="index == timeIndex ? 'actived' : ''" @click="selectTime(item,index)">
                        <text>{{ item.title }}</text>
                    </view>
                </view>
            </view>
            <view class="con_box">
                <text class="title">时间筛选</text>
                <view class="list_box">
                    <view class="view_box" v-if="index != 4 && index != 5" v-for="(item, index) in range.items" :key="index" :class="index == dateIndex ? 'actived' : ''" @click="selectDate(item,index)">
                        <text>{{ item.title }}</text>
                    </view>
                    <timeSelector showType="yearToMinute" @btnConfirm="bindDateChangeStart" @btnCancel="btnCancel">
                        <view class="view_box" :class="index == dateIndex ? 'actived' : ''" v-if="index == 4" v-for="(item, index) in range.items" :key="index" @click="selectDate(item,index)">
                            <text>{{ item.title }}</text>
                        </view>
                    </timeSelector>
                    <timeSelector showType="yearToMinute" @btnConfirm="bindDateChangeEnd" @btnCancel="btnCancel">
                        <view class="view_box" :class="index == dateIndex ? 'actived' : ''" v-if="index == 5" v-for="(item, index) in range.items" :key="index" @click="selectDate(item,index)">
                            <text>{{ item.title }}</text>
                        </view>
                    </timeSelector>
                </view>
            </view>
        </view>

        <view class="btn">
            <button type="default" class="reset" @click="replacementFn">
                重置
            </button>
            <button type="default" class="save" @click="saveGet()">
                保存
            </button>
        </view>
    </uni-drawer>
</view>
</template>

<script>
let windowWidth = 0,
    scrollTimer = false,
    tabBar;
import timeSelector from "@/component/wing-time-selector/wing-time-selector.vue";
import navigation from "@/component/navigation.vue";
import sun from "@/utils/request.js";
import orderList from "@/component/order-list/order-list";
import titleFix from "@/utils/titleFix";
const query = {
    company_id: "",
    keywords: "",
    range: "",
    range_type: "",
    status: "0",
    user_id: ""
};
export default {
    name: "auditlist",
    mixins: [titleFix],
    components: {
        navigation,
        timeSelector,
        orderList,
    },
    data() {
        return {
            drawerWidth: 300,
            query: Object.assign({}, query), // 搜索条件
            topheight: "",
            value: "", //搜索内容
            isFilter: false, //是否显示筛选框
            currentIndex: 0, //默认选中位置
            // 结算单审核状态
            status: [{
                    title: "待审核",
                    id: "0",
                },
                {
                    title: "审核通过",
                    id: "1",
                },
                {
                    title: "审核驳回",
                    id: "2",
                },
            ],
            companyIndex: "", //公司索引
            companey: ["全部", "红丝", "誉思", "曼格纳"], //签约公司
            peopleIndex: 0, //人员索引
            people: ["全部成员", "张三", "李四"], //人员列表
            timeIndex: 0, //时间类型索引
            timeList: ["所有时间", "举办时间", "签单时间", "录入时间"], //筛选时间类型
            dateIndex: 0, //时间索引
            dateList: [
                "全部时间",
                "今天",
                "本周",
                "本月",
                "开始时间",
                "结束时间",
            ], //筛选时间

            pagination: {
                page: 1,
                limit: 5,
            },
            page: 1,
            limit: 5,
            user: "", //个人信息
            list_data: [], //订单列表
            defaultShow: false, //是否显示 没有更多了

            check_status: [], //审核状态
            company_id: "", //签约公司
            companyId: "",
            range: "", //时间区间
            range_type: "", //时间类型
            user_id: {
                items: [],
            }, //人员
            tabCurrentIndex: 0, //当前选项卡索引
            scrollLeft: 0, //顶部选项卡左滑距离
            starTime: "",
            endTime: ""
        };
    },
    onLoad() {
        this.filterData();
        this.topheight = sun.getStatusBarHeight();

        this.user = uni.getStorageSync("user");
        windowWidth = uni.getSystemInfoSync().windowWidth;
    },
    onShow() {
        this.pagination = {
            page: 1,
            limit: 5,
        };
        this.list_data = [];
        this.getData();
    },
    onReachBottom() {

        ++this.pagination.page;
        this.getData();

    },
    methods: {
        topHeightFn(e) {
            this.topheight = e;
        },
        getData() {
            let that = this;
            let params = {};
            params = Object.assign({}, that.query);
            params['pagination'] = that.pagination;
            sun.request({
                url: "/api/order.settlement/audit",
                showLoading: true,
                token: true,
                data: params,
                success(res) {
                    if (res.code == 200) {
                        if (res.data.list.length < 1) {
                            that.defaultShow = true;
                        }
                        that.list_data = that.list_data.concat(res.data.list);
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    });
                },
            });
        },
        //筛选条件
        filterData(e) {
            let that = this;
            sun.request({
                url: "/h5/order.search/items",
                showLoading: true,
                token: true,
                data: {},
                success(res) {
                    if (res.code == 200) {
                        let data = res.data;
                        that.check_status = data.check_status; //审核状态
                        that.company_id = data.company_id; //签约公司
                        that.range = data.range; //时间区间
                        that.range_type = data.range_type; //时间类型
                        that.user_id = data.user_id; //人员

                        that.user_id.items.map((item, index) => {
                            item.status = false;
                            if (index == 0) {
                                item.status = true;
                            }
                        });
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    });
                },
            });
        },
        //显示筛选框
        showFilter() {
            this.$refs.searchDrawer.open();
        },
        //隐藏筛选框
        hideFilter() {
            this.$refs.searchDrawer.close();
        },
        //关闭筛选框
        screenClose() {
            this.$refs.searchDrawer.close();
        },
        //选择审核状态
        selectStatus(index) {
            this.currentIndex = index;
            this.pagination.page = 1;
            this.list_data = [];
            this.getData();
        },
        //选择公司
        selectCompany(item, index) {
            console.log(item)
            this.companyIndex = index
            this.query.company_id = item.id;
        },
        //选择人员
        selectPeople(item, index) {
            let _this = this;
            _this.query.user_id = item.id;
            _this.peopleIndex = index;
            this.$forceUpdate();
            console.log(_this.query)
        },
        //选择时间类型
        selectTime(item, index) {
            console.log(item)
            this.timeIndex = index;
            this.query.range_type = item.id;
        },
        //选择时间
        selectDate(item, index) {

            this.dateIndex = index;
            this.query.range = item.id;
            this.$forceUpdate();
        },
        bindDateChangeStart(e) {
            console.log(e)
            this.starTime = e.ymd;
            this.range.items[4].title = e.ymd;
            this.dateIndex = 4;
            this.$forceUpdate();
            this.query.range = this.starTime + '~' + this.endTime
        },
        btnCancel() {},
        bindDateChangeEnd(e) {
            this.endTime = e.ymd;
            this.range.items[5].title = e.ymd;
            this.dateIndex = 5;
            this.query.range = this.starTime + '~' + this.endTime
            this.$forceUpdate();
        },
        //搜索订单
        searchFn() {
            this.defaultShow = false;
            this.pagination.page = 1;
            this.list_data = [];
            this.getData({
                keywords: this.value,
            });
        },
        //进入详情页
        lookDetailFn(id) {
            uni.navigateTo({
                url: "../orderInfo/goodsDetail/goodsDetail?id=" + id,
            });
            // uni.navigateTo({
            // 	url:"../orderInfo/orderDetail/orderDetail?id="+id
            // })
        },
        viewAudit(id) {
            uni.navigateTo({
                url: "../orderInfo/myApproval/myApproval?id=" + id,
            });
        },
        //重置
        replacementFn() {
            this.currentIndex = 0; //审核索引
            this.companyIndex = 0; //公司
            this.peopleIndex = 0; //人员
            this.timeIndex = 0; //时间类型
            this.dateIndex = 0; //时间
        },
        //保存
        saveGet() {
            let that = this;
            that.defaultShow = false;
            if (
                that.range.items[4].title != "开始时间" ||
                that.range.items[5].title != "结束时间"
            ) {
                if (that.range.items[4].title == "开始时间") {
                    uni.showToast({
                        icon: "none",
                        title: "请选择开始时间",
                    });
                    return;
                }
                if (that.range.items[5].title == "结束时间") {
                    uni.showToast({
                        icon: "none",
                        title: "请选择结束时间",
                    });
                    return;
                }
            }
            that.user_id.result = [];
            that.pagination.page = 1;
            that.list_data = [];
            that.getData();
            that.$refs.searchDrawer.close(); //关闭筛选框
        },
        //tab切换
        changeTab(item, e) {
            console.log(item)
            let _this = this;
            _this.currentIndex = e;
            _this.query.status = item.id;
            _this.pagination.page = 1;
            _this.list_data = [];
            _this.defaultShow = false;
            _this.pagination.page = 1;
            _this.getData();
        },
        //获得元素的size
        getElSize(id) {
            return new Promise((res, rej) => {
                let el = uni.createSelectorQuery().select("#" + id);
                el.fields({
                        size: true,
                        scrollOffset: true,
                        rect: true,
                    },
                    (data) => {
                        res(data);
                    }
                ).exec();
            });
        },
    },
};
</script>

<style lang="less">
page {
    background: #f4f4f4;
    padding-top: 0;
}

.order-all {
    margin-top: 170upx;
}

.top {
    width: 100%;
    // height: 150upx;
    background: #ffffff;
    padding: 10upx 20upx 10upx 19upx;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    .left {
        width: 50upx;
        height: 58upx;
        display: flex;
        align-items: center;
        float: left;

        image {
            width: 40upx;
            height: 40upx;
        }
    }

    .search {
        flex: 1;
        margin-left: 10upx;

        input {
            width: 576upx;
            height: 58upx;
            background: rgba(255, 255, 255, 1);
            border: 1upx solid #dedede;
            border-radius: 5upx;
            padding-left: 24upx;
            box-sizing: border-box;
        }

        .searchIcon {
            position: absolute;
            right: 190upx;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .screen {
        width: 55upx;
        height: 58upx;
        font-size: 26upx;
        color: #406ceb;
        margin-left: 10upx;
        line-height: 58upx;
    }

    .search-more-btn {
        flex: 0 15%;

        button {
            padding: 8upx;
            font-size: 12px;
            background-color: #007aff;
            color: #fff;
        }
    }
}

/* 顶部tabbar */
.nav-bar {
    padding: 20upx 0;
    white-space: nowrap;
    background-color: #fff;

    .uni-scroll-view-content {}

    .nav-item {
        display: inline-block;
        padding: 5upx 20upx;
        text-align: center;
        font-size: 30upx;
        color: #303133;
        position: relative;

        &:after {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 4upx solid #007aff;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            transition: 0.3s;
        }
    }

    .current {
        color: #ffffff;
        background: rgba(64, 108, 235, 1);
        border-radius: 21upx;

        &:after {
            width: 50%;
        }
    }
}

.allOrder {
    width: 100%;
    height: 100%;
    padding: 24upx;
    margin-top: 110upx;
    box-sizing: border-box;

    .orderBox {
        width: 702upx;
        // height: 370upx;
        background: #ffffff;
        margin-bottom: 24upx;
        border-radius: 15px;
        position: relative;

        .title {
            width: 100%;
            height: 72upx;
            padding-left: 24upx;
            padding-right: 24upx;
            box-sizing: border-box;
            font-size: 26upx;
            border-bottom: 1upx solid #eeeeee;
            display: flex;
            align-items: center;
            position: relative;

            .number {
                width: auto;
                height: 25upx;
                color: #333333;
                display: block;
                float: left;
            }

            .status {
                // width:78upx;
                height: 25upx;
                display: block;
                color: #f7b55f;
                position: absolute;
                right: 24upx;
            }
        }
    }
}

.image {
    image {
        width: 200upx;
        height: 200upx;
        position: absolute;
        right: -40upx;
        top: -40upx;
        z-index: 5;
        animation-name: mychange;
        animation-duration: 500ms;
    }
}

@keyframes mychange {
    0% {
        position: absolute;
        right: -20upx;
        top: -20upx;
        z-index: 5;
        transform: scale(1.3);
    }

    50% {
        position: absolute;
        right: -20upx;
        top: -20upx;
        z-index: 5;
        transform: scale(1.3);
    }

    100% {
        position: absolute;
        right: -40upx;
        top: -40upx;
        z-index: 5;
        transform: scale(1);
    }
}

.allOrder .orderBox .info {
    width: 100%;
    height: 222upx;
    border-bottom: 1upx solid #eeeeee;
    padding-left: 24upx;
    box-sizing: border-box;

    .left {
        width: 50%;
        height: 100%;
        float: left;

        .con {
            width: 100%;
            height: 45upx;
            display: flex;
            align-items: center;

            .txt1 {
                width: 120upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
            }

            .txt2 {
                width: 200upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
                text-overflow: ellipsis;
                overflow: auto;
                white-space: nowrap;
            }
        }
    }

    .right {
        width: 50%;
        height: 100%;
        float: right;

        .con {
            width: 100%;
            height: 45upx;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .txt1 {
                width: 120upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
            }

            .txt2 {
                width: 200upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
                text-overflow: ellipsis;
                overflow: auto;
                white-space: nowrap;
            }
        }
    }
}

.allOrder .orderBox .detail {
    width: 100%;
    height: 72upx;
    padding-left: 24upx;
    padding-right: 24upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;

    text {
        width: 104upx;
        height: 25upx;
        display: block;
        font-size: 26upx;
        color: #666666;
    }

    image {
        width: 32upx;
        height: 32upx;
        display: block;
        position: absolute;
        right: 24upx;
    }
}

// 筛选框
.content {
    margin-top: 40upx;

    .con_box {
        margin-top: 10upx;

        .title {
            width: 100%;
            height: 25upx;
            font-size: 26upx;
            color: #666666;
            font-weight: 500;
            font-family: PingFang SC;
            padding: 0 24upx;
            box-sizing: border-box;
        }

        .list_box {
            padding: 0 24upx;
            box-sizing: border-box;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;

            .view_box {
                width: 160upx;
                height: 66upx;
                padding: 2upx;
                display: flex;
                justify-content: center;
                align-items: center;

                margin-top: 16upx;
                margin-right: 16upx;
                font-size: 24upx;
                white-space: wrap;
                color: #666666;
                background: #f6f6f6;
                border-radius: 5px;

                text {
                    text-align: center;
                }
            }
        }
    }
}

//选中状态
.actived {
    background: #eef2ff !important;
    border: 1upx solid #406ceb;
    color: #406ceb !important;
}

.btn {
    width: 100%;
    height: 73upx;
    position: absolute;
    bottom: 33upx;
    display: flex;
    justify-content: center;

    button {
        width: 214upx;
        height: 73upx;
        line-height: 73upx;
        font-size: 28upx;
        border-radius: 37px;
    }

    .reset {
        color: #406ceb;
        border: 1px solid rgba(64, 108, 235, 1);
        background: #ffffff;
    }

    .save {
        background: #406ceb;
        color: #ffffff;
    }
}
</style>
